<template>
  <div class="all">
    <van-nav-bar
      class="head"
      title="口碑榜单"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-cell title="头像" is-link to="" center>
        <van-image round src="" />
      </van-cell>
      <div v-for="(item, index) in list" :key="index">
        <van-cell :title="item.title" is-link to="">
          {{ item.value }}
        </van-cell>
      </div>
      <van-cell title="二维码" is-link to="QRCode" class="QRCode">
        <van-icon name="enlarge" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "昵称",
          value: "海洋里的小虾米",
        },
        {
          title: "电话",
          value: "12345670110",
        },
        {
          title: "性别",
          value: "男",
        },
        {
          title: "常驻地",
          value: "北京 朝阳",
        },
        {
          title: "学校",
          value: "深圳大学",
        },
        {
          title: "生日",
          value: "1988-04-06",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/Member" }).catch((error) => error);
    },
  },
};
</script>

<style scoped lang='less'>
.all {
  padding-top: 84px;
  padding-bottom: 197px;
  background-color: rgba(245, 245, 245, 1);
  font-size: 14px;
  border-top: 1px solid rgba(220, 220, 220, 1);
  border-bottom: 1px solid rgba(220, 220, 220, 1);
  width: 100%;
  .head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    position: fixed;
    top: 0;
  }
  /deep/.van-nav-bar .van-icon {
    color: rgba(153, 153, 153, 1);
  }
  /deep/.van-nav-bar__title {
    color: rgba(42, 131, 78, 1);
    font-size: 18px;
  }
  .van-cell-group {
    width: 100%;
    border-radius: 0px;
    font-size: 16px;
    padding-left: 11px;
    box-sizing: border-box;
    .van-image {
      width: 42px;
      height: 42px;
    }
    .van-cell {
      border-bottom: 1px solid rgba(220, 220, 220, 1);
    }
    .QRCode {
      border-bottom: none;
    }
  }
}
</style>